<template>
    <div  class="addAndEdit">
        <h3>添加采收记录</h3>
        <el-form :model="tableData2" label-width="120px" ref="ruleFormRef" :rules="rules" style="margin-left:250px ;">
            <el-form-item label="采摘批次" prop="batch">
                <el-input v-model="tableData2.batch" style="width: 350px;" />
            </el-form-item>
            <el-form-item label="选择地块"prop="place" style="width: 350px;">
                <el-select v-model="tableData2.place" placeholder="地块1 " label-width="100px" clearable>
                    <el-option label="地块1" value="1" />
                    <el-option label="地块2" value="2" />
                </el-select>
            </el-form-item>
             <el-form-item label="采收作物"prop="food" style="width: 350px;">
                <el-select v-model="tableData2.food" placeholder="柑橘（冰糖桔） " label-width="100px" clearable>
                    <el-option label="柑橘（冰糖橘）" value="柑橘（冰糖橘）" />
                    <el-option label="玉米" value="玉米" />
                    <el-option label="高粱" value="高粱" />
                    <el-option label="水稻" value="水稻" />
                </el-select>
            </el-form-item>
            <el-form-item label="采收人"prop="people" style="width: 350px;">
                <el-select v-model="tableData2.people" placeholder="王浩" clearable>
                    <el-option label="王浩" value="王浩" />
                    <el-option label="张山" value="张山" />
                </el-select>
            </el-form-item>
            <el-form-item label="采收时间"prop="times" style="width: 350px;">
                <el-date-picker v-model="tableData2.times" type="date" placeholder="请选择" clearable />
            </el-form-item>
            <el-form-item label="计划采摘量"prop="weight">
                <el-input v-model="tableData2.weight" style="width: 350px;"/>
            </el-form-item>
            <el-form-item label="一级果（公斤）">
                <el-input v-model="tableData2.first" style="width: 350px;"/>
            </el-form-item>
            <el-form-item label="二级果（公斤）">
                <el-input v-model="tableData2.second" style="width: 350px;"/>
            </el-form-item>
            <el-form-item label="三级果（公斤）">
                <el-input v-model="tableData2.third" style="width: 350px;"/>
            </el-form-item>
            <el-form-item label="通货（公斤）">
                <el-input v-model="tableData2.common" style="width: 350px;"/>
            </el-form-item>
            <el-form-item>
                <el-button  @click="closeHandler"> 取消 </el-button>
                <el-button type="primary" @click="submitHandler">确认</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script lang='ts' setup>
import type { PlanItems } from '@/interface/harvestInterface';
import router from '@/router';
import { number } from 'echarts';
import type { FormInstance, FormRules } from 'element-plus';
import { reactive, ref, watch, type ModelRef, type Ref } from 'vue';
const newAddRecordData=ref(null)
const emits=defineEmits(['load'])
const ruleFormRef = ref<FormInstance>()
const select = ref()
const originData = {
   batch: '',
    common: '',
    commonRequest: '',
    first: '',
    firstRequest: '',
    food: '',
    id: '',
    people: '',
    place: '',
    second: '',
    secondRequest: '',
    third: '',
    thirdtRequest: '',
    times: '',
    weight: '',
}
const tableData2=reactive({...originData})

const rules = reactive<FormRules<PlanItems>>({
    batch: [
        { required: true, message: '请输入批次', trigger: 'blur' }
    ],
    place: [
        { required: true, message: '请输入地块', trigger: 'blur' }
    ],
    food: [
        { required: true, message: '请输入采收作物', trigger: 'blur' }
    ],
    people: [
        { required: true, message: '请输入采收人', trigger: 'blur' }
    ],
    times: [
        { required: true, message: '请选择采收时间', trigger: 'blur' }
    ],
    weight: [
        { required: true, message: '请输入采收量', trigger: 'blur' }
    ],

})
const submitHandler = () => {
    if (!ruleFormRef.value) return;
    ruleFormRef.value.validate((valid, fields) => {
        if (valid) {
            router.push({ name: 'harvest' })
            if (tableData2) {
                if (typeof (tableData2.times) !== 'string') {
                    tableData2.times = (tableData2.times as Date).toLocaleDateString().replace(/\//g, '.')
                }
            }
            emits('load', tableData2)
        }else{
            console.log('error submit',fields)
        }
    })
    // router.push({name:'harvest'})
    // if(tableData2){
    //     if(typeof(tableData2.times) !== 'string'){
    //         tableData2.times=(tableData2.times as Date).toLocaleDateString().replace(/\//g,'.')
    //     }
        
    // }
    // emits('load', tableData2)
}
const closeHandler=()=>{
    router.push({name:'harvest'})
}

</script>

<style lang='scss' scoped>
.example-showcase .el-dropdown-link {
    cursor: pointer;
    color: var(--el-color-primary);
    display: flex;
    align-items: center;
}
.addAndEdit{
    //  overflow:auto;
    width: 100%;
    height: 150%;
    background: white;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
}
</style>